<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="common-header">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Admin - Dashboard</title>

    <!-- Bootstrap CSS-->
    <link rel="stylesheet"
	    th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.min.css}">
    <link rel="stylesheet"
	    th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">

    <!-- Custom styles-->
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">

</head>

<body id="page-top">

<div th:fragment="common-navbar">
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">

    <a class="navbar-brand mr-1" th:href="@{/}">Admin Portal</a>

    <!-- Navbar User dropdown -->
    <ul class="navbar-nav ml-auto">
        <li class="ml-auto text-primary navbar-text">Welcome, <span th:text="${#httpServletRequest.getRemoteUser()}"></span></li>
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle"
               href="#"
               id="userDropdown"
               role="button"
               data-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false">
                <i class="fa fa-user-circle fa-fw"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
            </div>
        </li>
    </ul>

</nav>
</div>

<div id="wrapper">

    <!-- Sidebar -->
    <ul th:fragment="common-sidebar" class="sidebar navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" th:href="@{/}">
                <i class="fa fa-fw fa-tachometer"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="nav-item no-arrow">
            <button class="btn nav-link"
                type="button"
                data-toggle="collapse"
                data-target="#productsCollapse"
                aria-haspopup="true"
                aria-expanded="false">
                <i class="fa fa-fw fa-shopping-bag"></i>
                <span>Products</span>
            </button>
            <ul class="collapse list-group"
                id="productsCollapse"
                aria-labelledby="productsCollapse">
                <a class="list-group-item list-group-item-action" th:href="@{/product/addProduct}">Add new product</a>
                <a class="list-group-item list-group-item-action" th:href="@{/product/productList}">View product list</a>
            </ul>
        </li>
        <li class="nav-item dropdown no-arrow">
            <button class="btn nav-link"
                type="button"
                data-toggle="collapse"
                data-target="#usersCollapse"
                aria-haspopup="true"
                aria-expanded="false">
                <i class="fa fa-fw fa-users"></i>
                <span>Users</span>
            </button>
            <ul class="collapse list-group"
                id="usersCollapse"
                aria-labelledby="usersDropdown">
                <a class="list-group-item list-group-item-action" th:href="@{/user/addUser}">Add new user</a>
                <a class="list-group-item list-group-item-action" th:href="@{/user/userList}">View user list</a>
            </ul>
        </li>
    </ul>

</div>
<!-- /#wrapper -->

<!-- Sticky Footer -->
<footer th:fragment="common-footer" class="sticky-footer">
    <div class="container my-auto">
        <div class="copyright text-center my-auto">
            <span>Copyright © Admin Portal for the TurTech webstore 2019</span>
        </div>
    </div>
</footer>

<div th:fragment="common-bottom">

<!-- Logout Modal-->
<div class="modal fade"
    id="logoutModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                <a class="btn btn-primary" th:href="@{/logout}">Logout</a>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript-->
<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>

<!-- Page level plugin JavaScript-->
<script th:src="@{/webjars/datatables/1.10.20/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/webjars/datatables/1.10.20/js/dataTables.bootstrap4.min.js}"></script>

<!-- Custom scripts for all pages-->
<script th:src="@{/js/scripts.min.js}"></script>

</div>

</body>

</html>